<template>
	<div v-loading="loading">
		<div class="content-top">
			<span class="h1">报表查询</span>
			<span class="h2">分户征地拆迁统计表</span>
		</div>

		<div class="title">
统计表4 （ {{proStr}} ）项目征地拆迁分户统计表
		</div>

		<div class="fbhead">
			<div class="address clearfix">
				<span>工程项目：</span>
					<el-select v-model="proValue" placeholder="请选择" filterable @change="changePro()">
						<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
					<span style="margin-left: 20px;">行政区域</span>
					<el-cascader :options="regions" v-model="region" separator='-' clearable change-on-select filterable></el-cascader>
				
				
				<!-- <span class="date fr">2018年4月12日</span> -->
        <div class="fr" style="display:inline-block">
          <el-input v-model="KeyWord" placeholder="请输入户主姓名或身份证" style="width:217px;"></el-input>
          <el-button type="primary" size="small" @click="fnSerach()">查询</el-button>
          <span class="fr" style="padding-top: 5px;">{{datas | Format}}</span>
        </div>
			</div>
		</div>
		<div class="tables">
			<table cellspacing="0" cellpadding="0" border="0" style="width:100%;">
				<thead>
					<tr>
						<th rowspan="3">序号</th>
						<th rowspan="3">户主信息</th>
						<th rowspan="2">1土地征用</th>
						<th rowspan="2">3房屋主体</th>
						<th colspan="13">补偿费用</th>
					</tr>
					<tr>

						<th>1土地征用</th>
						<th>2竹木果树类</th>
						<th>3房屋主体</th>
						<th>4房屋装饰</th>
						<th>5迁坟补偿</th>
						<th>6特殊征拆</th>
						<th rowspan="2">合计补偿</th>
					</tr>
					<tr>
						<th>㎡</th>
						<th>(当量㎡)</th>
						<!-- <th>分表编号</th> -->
						<th>金额（元）</th>
						<!-- <th>分表编号</th> -->
						<th>金额（元）</th>
						<!-- <th>分表编号</th> -->
						<th>金额（元）</th>
						<!-- <th>分表编号</th> -->
						<th>金额（元）</th>
						<!-- <th>分表编号</th> -->
						<th>金额（元）</th>
						<!-- <th>分表编号</th> -->
						<th>金额（元）</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in DataRows" :key="index">
						<td>{{item.index}}</td>
						<td>{{item.frominfo.MainName+'-'+item.frominfo.Tel+'-'+item.frominfo.CardID}}</td>
						<td>{{item.LandAmount}}</td>
						<td>{{item.HouseAmount}}</td>
						<!-- <td>{{item.FlowBillCode}}</td> -->
						<td>{{item.LandMoney}}</td>
						<!-- <td>{{item.FlowBillCode}}</td> -->
						<td>{{item.GreenMoney}}</td>
						<!-- <td>{{item.FlowBillCode}}</td> -->
						<td>{{item.HouseMoney}}</td>
						<!-- <td>{{item.FlowBillCode}}</td> -->
						<td>{{item.HouserExMoney}}</td>
						<!-- <td>{{item.FlowBillCode}}</td> -->
						<td>{{item.GraveMoney}}</td>
						<!-- <td>{{item.FlowBillCode}}</td> -->
						<td>{{item.OtherMoney}}</td>
						<td>{{item.TotalMoney}}</td>
					</tr>
				</tbody>
				<tfoot>
            <tr>
              <td colspan="2">合计</td>
              <td>{{SumRow.LandAmount}}</td>
              <td>{{SumRow.HouseAmount}}</td>
              <td>{{SumRow.LandMoney}}</td>
              <td>{{SumRow.GreenMoney}}</td>
              <td>{{SumRow.HouseMoney}}</td>
              <td>{{SumRow.HouserExMoney}}</td>
              <td>{{SumRow.GraveMoney}}</td>
              <td>{{SumRow.OtherMoney}}</td>
              <td>{{SumRow.TotalMoney}}</td>
            </tr>
			<tr>
              <td colspan="2">累计</td>
              <td>{{TotalRow.LandAmount}}</td>
              <td>{{TotalRow.HouseAmount}}</td>
              <td>{{TotalRow.LandMoney}}</td>
              <td>{{TotalRow.GreenMoney}}</td>
              <td>{{TotalRow.HouseMoney}}</td>
              <td>{{TotalRow.HouserExMoney}}</td>
              <td>{{TotalRow.GraveMoney}}</td>
              <td>{{TotalRow.OtherMoney}}</td>
              <td>{{TotalRow.TotalMoney}}</td>
            </tr>
          </tfoot>
			</table>
		</div>
		<div>

		</div>
	</div>
</template>
<script>
import api from "../../axios/api";
export default {
  name: "HlandReport",
  data() {
    return {
      loading: false,
      KeyWord: "",
      region: [],
	  proValue: "",
	  proStr:'',
      options: [],
      regions: [],
      DataRows: [],
      SumRow: "",
      TotalRow: "",
      datas:new Date(),
    };
  },
  filters: {
			Format: function(fmt) {
				if(fmt) {
					let date = new Date(fmt);
					let y = date.getFullYear()
					let m = date.getMonth() + 1
					let d = date.getDate()
					let s = date.getHours() // 小时
					let f = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()// 分
					let g = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds() // 秒
					return y + '-' + m + '-' + d + ' ' + s + ':' + f + ':' + g;
				} else {
					return ''
				}
			}
		},
  mounted() {
  	setInterval(()=>{
		this.datas = new Date()
	},1000)
    this.getlistde();
    // this.getData();
  },
  methods: {
    //获取项目
    getlistde() {
      this.$post(api.getlistde).then(response => {
        if (response.isOK == true && response.state == 200) {
            this.options = response.Data;
            this.proValue = this.options[0] ? this.options[0].ID : "";
            this.proStr=this.options[0].Name
            this.anonymousget();
            this.getData()
        }else{
          this.loading = false;
          this.$message.error(response.msg);
        }
      }).catch((error)=>{
        this.loading = false;
      })
    },
    //获取行政区域
    anonymousget() {
      this.regions = [];
      this.$get(api.anonymousget + "/" + this.proValue)
        .then(response => {
          if (response.data.isOK == true && response.data.state == 200) {
            for (var i = 0; i < response.data.Data.length; i++) {
              this.regions.push({
                label: response.data.Data[i].RegionName,
                value: response.data.Data[i].ID,
                ParentID: response.data.Data[i].ParentID
              });
            }
            this.regions = this.$toTree(this.regions);
          } else {
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {});
    },
    //当项目改变的时候重新拉取行政区域
    changePro() {
      if(this.proValue==''){
        this.region=[];
      }
      this.anonymousget();
    },
    getData() {
      this.loading = true;
      this.$post(api.detailfa, {
        QueryKeyWord: this.KeyWord,
        RegionID: this.region[this.region.length - 1],
        ProjectID: this.proValue
      })
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.DataRows = response.Data.DataRows;
            this.SumRow = response.Data.SumRow;
            this.TotalRow = response.Data.TotalRow;
            this.loading = false;
          } else {
            this.loading = false;
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
	},
	//搜索
	fnSerach(){
		for(let i=0;i<this.options.length;i++){
			if(this.proValue==this.options[i].ID){
				this.proStr=this.options[i].Name
			}
		}
		this.getData()
	}
  }
};
</script>
<style scoped>
.fbhead {
  width: 100%;
}

.address {
  margin: 10px 0;
}

.title {
  width: 100%;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  margin: 10px auto;
  color: #909399;
}

.stage {
  display: inline-block;
  padding: 0 10px;
}

.date {
  display: inline-block;
  padding: 0 10px;
  line-height: 40px;
  font-size: 13px;
}

.tables {
  width: 100%;
}

.tables table {
  color: #606266;
  margin: auto;
  border-collapse: collapse;
  font-size: 12px;
}

.tables table td,
.tables table th {
  text-align: center;
  padding: 5px;
  border: 1px solid #ebeef5;
}
tfoot{
	font-weight: 600
}
</style>